<template>
	<view class="container p-lr16">
		<view class="flex align-center justify-between">
			<text class="f-w500 f-s20">形象视频和照片</text>
			<view class="flex align-center">
				<image src="/static/images/login/hint.png" class="width-14 height-14" mode="widthFix"></image>
				<text class="f-s12" @click="handleOpenPopup">上传须知</text>
			</view>
		</view>
		<view class="m-b15 m-t8 f-s14 text-gray">
			<text>请上传1个形象视频及至少3张形象图片，最多5张</text>
		</view>
		<view class="flex flex-wrap justify-between">
			<view>
				<UploadVideo width="220rpx" height="220rpx" v-model="form.album.videos">
					<view class="upload-image">
						<image src="/static/images/login/video.png" class="width-28" mode="widthFix"></image>
						<text class="m-t8 text-gray f-s12">上传视频</text>
					</view>
				</UploadVideo>
			</view>

			<view class="image-item" :class="{'m-t8':index>1}" v-for="(item,index) in form.album.images" :key="index">
				<UploadImage width="220rpx" height="220rpx" v-model="item.url">
					<view class="upload-image">
						<image src="/static/images/login/photo.png" class="width-28" mode="widthFix"></image>
						<text class="m-t8 text-gray f-s12">上传照片</text>
					</view>
				</UploadImage>
				<view class="cover-tag" v-if="item.isCover">
					<text>封面</text>
				</view>
				<view class="cover-item" v-if="item.url" @click="handleSetCover(item,index)">
					<text>设为封面</text>
				</view>
			</view>
		</view>
		<view class="flex justify-center fixed-bottom bg-white">
			<view class="self-btn m-r10" style="background-color: #EBECED;width: 194rpx;" @click="handlePrev">
				<text class="text-black">上一步</text>
			</view>
			<view class="self-btn" style="width: 488rpx;" @click="handleConfirm">
				<text>下一步(2/4)</text>
			</view>
		</view>
		<u-popup :show="popupShow" round="40rpx" mode="bottom" @close="handleClose">
			<view class="popup">
				<view class="flex justify-between align-center">
					<view class="">
						<text class="f-s17 f-w500">形象照片或视频上传须知</text>
					</view>
					<image src="/static/images/login/close.png" class="width-24" mode="widthFix" @click="handleClose">
					</image>
				</view>
				<view class="m-t8">
					<text class="f-s14" style="color: #585D66;">上传五官清晰的照片/视频，会更受欢迎哦~</text>
				</view>
				<view class="flex justify-center">
					<image src="/static/images/login/image/1-1.png"
						style="width: 480rpx;height: 480rpx;margin-top: 18rpx;" mode=""></image>
				</view>
				<u-divider lineColor="#DDE0E6" textColor="#202020" textSize="24rpx" text="不能通过的照片/视频"></u-divider>

				<view class="flex justify-around" style="margin: 34rpx 0 56rpx 0;">
					<image src="/static/images/login/image/2-1.png" class="width-48 height-48" mode=""></image>
					<image src="/static/images/login/image/2-2.png" class="width-48 height-48" mode=""></image>
					<image src="/static/images/login/image/2-3.png" class="width-48 height-48" mode=""></image>
					<image src="/static/images/login/image/2-4.png" class="width-48 height-48" mode=""></image>
				</view>
				<view class="self-btn margin-center full-width" hover-class="pressed" @click="handleClose">
					<text>我知道啦</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import UploadImage from '@/components/upload-image'
	import UploadVideo from '@/components/upload-video'
	import {
		authStepsDetails,
		imageAuth
	} from "@/api/mine/auth.js"
	export default {
		name: "",
		components: {
			UploadImage,
			UploadVideo
		},
		data() {
			return {
				popupShow: false,
				form: {
					album: {
						videos: '',
						images: [{
							url: '',
							isCover: false
						}, {
							url: '',
							isCover: false
						}, {
							url: '',
							isCover: false
						}, {
							url: '',
							isCover: false
						}, {
							url: '',
							isCover: false
						}]
					}
				}
			}
		},
		onShow() {
			this.checkPermission()
		},
		created() {
			this.getDetail()
		},
		methods: {
			async checkPermission() {
				// 判断相册权限
				let status = permision.isIOS ? await permision.requestIOS('photoLibrary') :
					await permision.requestAndroid('android.permission.READ_EXTERNAL_STORAGE');
				if (status === 0) {
					uni.showModal({
						title: "提示",
						content: '相册权限未开启，请前往设置打开授权',
						confirmText: '前往设置',
						success(res) {
							if (res.confirm) {
								uni.openAppAuthorizeSetting()
							} else {
								this.$toast('拒绝授权将无法使用相册照片')
							}
						}
					})
				}
			},
			getDetail() {
				authStepsDetails({
					auth_type: 3
				}).then(res => {
					let {
						data: {
							auth_detail
						}
					} = res
					this.$set(this.form.album, 'videos', auth_detail.album?.videos ?? '')
					for (let i = 0; i < 5; i++) {
						if (auth_detail?.album?.images[i]) {
							this.$set(this.form.album.images, i, auth_detail?.album?.images[i])
						} else {
							this.$set(this.form.album.images, i, {
								url: '',
								isCover: false
							})
						}
					}
				})
			},
			padArray(arr, padValue = '', targetLength = 5) {
				while (arr.length < targetLength) {
					arr.push(padValue);
				}
				return arr;
			},
			handleConfirm() {
				if (!this.validateForm(this.form)) return
				imageAuth(this.form).then(res => {
					this.$emit('next', 3)
				})

			},
			handlePrev() {
				this.$emit('next', 1)
			},
			validateForm(form) {
				form = JSON.parse(JSON.stringify(form))
				if (!form.album.videos) {
					this.$toast('请上传形象视频')
					return false
				}
				form.album.images = form.album?.images.filter(item => Boolean(item.url)) ?? []
				if (form.album.images.length < 3) {
					this.$toast('请上传至少3张形象照片')
					return false
				} else {
					let some = form.album.images.some(item => item.isCover)
					if (!some) {
						this.$toast('请设置封面图片')
						return false
					}
				}
				return true
			},
			handleSetCover(url, index) {
				this.form.album.images.forEach(item => {
					if (item.isCover) {
						item.isCover = false
					}
				})
				this.$set(this.form.album.images[index], 'isCover', true)
			},
			handleOpenPopup() {
				this.popupShow = true
			},
			handleClose() {
				this.popupShow = false
			},
		}
	}
</script>

<style scoped lang="scss">
	.container {
		.upload-image {
			width: 220rpx;
			height: 220rpx;
			background-color: #F5F6F7;
			border-radius: 12rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}

		.image-item {
			position: relative;
			overflow: hidden;

			.cover-tag {
				position: absolute;
				top: 0;
				left: 0;
				z-index: 999;
				background: #FE3F59;
				border-radius: 12rpx 0rpx 12rpx 0rpx;
				padding: 5rpx 16rpx 0 16rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
				line-height: 34rpx;
			}

			.cover-item {
				position: absolute;
				bottom: 0;
				left: 0;
				z-index: 999;
				background: rgba(0, 0, 0, 0.7);
				border-radius: 0rpx 12rpx 0rpx 12rpx;
				padding: 5rpx 16rpx 0 16rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
				line-height: 34rpx;
			}
		}

		.popup {
			width: 100%;
			padding: 32rpx;
		}
	}

	::v-deep .u-upload__wrap__preview {
		margin: 0;
	}
</style>